<template>
  <div
    class="RightSidebarBox"
    :class="{
      dark: theme.state.themeState == 'drak',
      light: theme.state.themeState == 'light',
    }"
  >
    <div>推荐用户</div>
    <div v-for="item in renderArr" :key="item.uId" class="userItem">
      <img :src="item.headerImg" alt="点击进入主页" />
      <span>{{ item.nick }}</span>
      <p class="mybtn">
        <router-link
          :to="{
            path: `/about/${item.uId}`,
            params: { id: item.uId },
          }"
        >
          主页
        </router-link>
      </p>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { useStore } from "vuex";
@Options({
  props: {
    renderArr: Object,
  },
  mounted() {
    console.log(this.renderArr);
  },
})
export default class RightSidebar extends Vue {
  theme: any = useStore();
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url("../../assets/less/global.less");
@import url("./index.less");
</style>